<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>javaScript高阶函数</title>
</head>
<body>
<script>
  // js面向函数编程
  // 高阶函数:filter/map/reduce
  // 举例：
  let nums = [20, 40, 199, 323, 30, 50, 540];

  // 1、filter:过滤数组中不满足条件的元素，返回一个满足条件的数组，返回值：true或false
  // 需求1：获取数组中小于100的元素
  /*let newNums = nums.filter(function (num) {
    return num < 100
  });*/
  // 箭头函数的写法
  let newNums = nums.filter(num => num < 100);
  console.log(newNums);

  // 2、map：对数组中的元素进行操作，并返回新得元素,返回值：每个元素操作的结果
  // 需求2：让数组中的值都乘以2
  /*let newNums2 = newNums.map(function (num) {
    return num * 2
  });*/
  // 箭头函数写法
  let newNums2 = newNums.map(num => num * 2)
  console.log(newNums2);

  // 3.reduce:数组中的元素相护运算,previousValue指操作的中间值，0代表previousValue初始值为0，num为每次迭代的元素值
  // 需求3、获取数组中的值相加的结果
  /*let newNums3 = newNums2.reduce(function (previousValue, num) {
    return previousValue + num
  }, 0)*/
  // 箭头函数写法
  let newNums3 = newNums2.reduce((previousValue, num) => previousValue + num, 0)
  console.log(newNums3);

  /*-----------------------------------总结起来的写法----------------------------------------------*/
  // 1、汇总后的普通写法
  /*let finalNum = nums.filter(function (num) {
    return num < 100
  }).map(function (num) {
    return num * 2
  }).reduce(function (preValue, num) {
    return preValue + num
  }, 0)*/

  // 2、汇总后箭头函数的写法
  let finalNum = nums.filter(num => num < 100).map(num => num * 2).reduce((preValue, num) => preValue + num, 0)
  console.log(finalNum);
</script>
</body>
</html>
